.y-tabs {
  position: relative;
  display: block;
  width: 100%;

  // 标签栏垂直方位下的根容器样式
  &.is-vertical {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    flex: 1;

    // 垂直时标签栏scroll-view的子项垂直排列
    .y-tabs__scroll {
      flex-direction: column;
    }
  }

  &.is-cancel-tonch {
    touch-action: none;
  }

  // 区域滚动下的滚动导航
  &.is-areaScroll.is-scrollNav {
    display: flex;
    height: 100vh;
    flex-direction: column;

    // 标签栏不收缩
    .y-tabs__wrap {
      flex-shrink: 0;
    }

    .y-tabs__track,
    .y-tabs__content-scrollview {
      height: 100%;
    }
  }

  // 区域滚动下的侧边栏导航
  &.is-areaScroll.is-sidebarNav {
    display: flex;
    height: 100vh;
    flex-direction: row;

    .y-tabs__scroll {
      height: 100%;
    }

    // 标签栏不收缩
    .y-tabs__wrap {
      flex-shrink: 0;
    }

    .y-tabs__track,
    .y-tabs__content-scrollview {
      height: 100%;
    }
  }
}

// 依赖元素
.y-tabs__depend {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px; //必须保证有高度，否则observer无效
  width: 100%;
}

// 透明标签栏所需的依赖元素
.y-tabs__depend--transparent {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px; //必须保证有高度，否则observer无效
  width: 1px;
}

// 模拟标签栏吸顶时设置offset时距屏幕顶部的元素
.y-tabs__depend--offset {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 1px;
}

// 标签栏占位元素
.y-tabs__placeholder {
  position: relative;
}

// 标签垂直展示且吸顶时，标签栏占位元素不伸缩
.y-tabs.is-fixed.is-vertical .y-tabs__placeholder {
  flex-shrink: 0;
}

// 文字省略
.y-tabs__ellipsis {
  overflow: hidden;
  // text-overflow: ellipsis;
  white-space: nowrap;
}

// 导航区域包裹层
.y-tabs__wrap {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  visibility: visible;
  background: #fff;
  // touch-action: none;
  height: 40px;

  // 标签栏垂直展示时包裹层样式
  &.is-vertical {
    width: 100px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
  }

  // 粘性定位布局下的导航区域包裹层
  &.is-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
  }

  // 标签垂直展示且吸顶时，给定bottom，否则scroll-view不会滚动
  &.is-fixed.is-vertical {
    bottom: 0;
  }

  // 透明的导航区域包裹层
  &.is-transparent {
    background: rgba(255, 255, 255, 0);
  }

  // 标签栏水平时按钮风格的包裹层
  &.is-button:not(.is-vertical),
  &.is-line-button:not(.is-vertical) {
    padding: 0 8px;
  }
}

// scroll-view组件样式
.y-tabs__scroll {
  position: relative;
  width: 100%;
  white-space: nowrap; // 使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式
  flex-direction: row;
}

// 条件编译不放在样式中，vue3无效

// H5、APP端去滚动条
// 小程序端会报：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
/* #ifdef H5 || APP */
.y-tabs__scroll ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}
/* #endif */

// IOS 13 以下的系统，当滚动区域设置了-webkit-overflow-scrolling: touch;时（必须设置，否者几乎无法滚动），::-webkit-scrollbar 相关属性会失效，iOS 13 已经修复了此Bug。
// 小程序端: 去除 scroll-view 组件的滚动条
/* #ifndef H5 || APP  */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}
/* #endif */

// 导航区域
.y-tabs__nav {
  position: relative;
  box-sizing: border-box;
  user-select: none;
  flex: 1;
  display: flex;

  &.is-shrink {
    display: inline-flex;
  }

  // 卡片风格
  &.is-card {
    margin: 6px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #0022ab;
  }

  // 标签栏垂直时导航区域样式
  &.is-vertical {
    flex-direction: column;
    height: auto;

    .y-tab {
      flex: unset;
    }
  }

  // 标签左侧、右侧的补充区域
  &-left,
  &-right {
    position: relative;
    display: inline-flex;
    white-space: nowrap;
  }
}

// 导航标签
.y-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  font-size: 28rpx;
  color: #646566;
  text-align: center;
  padding: 0 4px;
  flex: 1;
  cursor: pointer;
  // webkit的css扩展：1、-webkit-tap-highlight-color:这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。有事件监听的元素被点击的时候会被高亮显示，比如我的android上表现为一个蓝框加上半透明的背景
  -webkit-tap-highlight-color: transparent;
  // transition-duration: 0.2s;
  // transition-property: background;
  flex-shrink: 0;
  z-index: 2;

  // 选中状态
  &.is-active {
    color: #323233;
    font-weight: 500;
  }

  // 禁用状态
  &.is-disabled {
    color: #c8c9cc !important;
    cursor: not-allowed;
  }

  // 收缩布局
  &.is-shrink {
    flex: none;
    padding: 0 8px;
  }

  //卡片风格
  &.is-card {
    height: 28px;
    line-height: 28px;
  }
}

// 标题区域
.y-tab__title {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: inherit;
}

// 标题区域垂直排列
.y-tab__title--top,
.y-tab__title--bottom {
  flex-direction: column;
}

// 标题文字
.y-tab__text {
  position: relative;
  display: block;
  line-height: 1.2;
  order: 2;
  white-space: nowrap; //字节会设置white-space:normal
}

// 标签垂直展示时，未达到文字超出隐藏的条件时
.y-tabs__nav.is-vertical .y-tab__text:not(.y-tabs__ellipsis) {
  white-space: normal;
}

// 使用order排序
.y-tab__text--left,
.y-tab__text--top {
  order: 0;
}

// 标题图标/图片包裹层
.y-tab__icons {
  display: flex;
  align-items: center;
  order: 1;
  z-index: 1;
}

//标题图片
.y-tab__image {
  width: 20px;
  height: 20px;
}

// 右上角信息区域
.y-tab__info {
  display: inline-flex;
  position: relative;

  &--dot,
  &--badge {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    background-color: #e53935;
    transform-origin: 100%;
  }

  // 小红点
  &--dot {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    transform: translate(0%, -180%);
  }

  // 徽标
  &--badge {
    line-height: 13px;
    min-width: 18px;
    border-radius: 18px;
    padding: 0 2px;
    transform: translate(0%, -120%);
    font-size: 18rpx;
    font-weight: 500;
    text-align: center;
    color: #fff;
  }
}

// 底部条滑块
.y-tabs__bar {
  position: absolute;
  display: inline-flex;
  left: 0;
  z-index: 1;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #0022ab;
  box-sizing: border-box;

  // line风格的滑块
  &.is-line {
    z-index: 2; //z-index与y-tab一样,避免被遮挡

    // 标签水平展示时
    &:not(.is-vertical) {
      bottom: 3px;
      width: 20px;
      height: 3px;
      border-radius: 3px;
    }

    // 标签垂直展示时
    &.is-vertical {
      top: 0;
      left: 3px;
      width: 3px;
      height: 20px;
      border-radius: 3px;
    }
  }

  // button、line-button风格的滑块
  &.is-button,
  &.is-line-button {
    // top: 0;
    justify-content: center;
    align-items: center;
    border-radius: 26px;

    // 标签水平展示时
    &:not(.is-vertical) {
      height: calc(100% - 8px);
      bottom: 4px;
    }

    // 标签垂直展示时
    &.is-vertical {
      left: 3px;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
    }
  }

  // 线性按钮风格的滑块
  &.is-line-button {
    background-color: transparent;
    border: 2rpx solid transparent;
  }
}

// 标签内容
.y-tabs__content {
  display: block;
  position: relative;
  overflow: hidden; //会导致uni-data-select无法撑开显示下拉选项,最好给pane中的内容设置一个高度(如果包裹select的父元素都没有设置relative，则不会裁剪absolute属性的元素)
  // 标签栏垂直展示，内容减去标签栏默认宽度
  &.is-vertical {
    width: 100%;
  }
}
// 标签内容的滑动轨道容器
.y-tabs__track {
  position: relative;
  display: flex;
  width: 100%;
  // will-change: left;
  will-change: transform;

  // 滚动导航模式下内容卡片垂直排列
  &.is-scrollspy {
    flex-direction: column;
  }
}

// 标签内容卡片
.y-tab__pane {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  position: relative;
  flex-direction: row;
  display: block;
  visibility: visible;
  transform: translate(0px, 0px) translateZ(0px);

  // 选中时
  &.is-active {
    height: auto;
  }
  // 滚动导航
  &.is-scrollspy {
    height: auto;
  }
}
.y-tab__pane--wrap {
  position: relative;
}
// 区域滚动下的标签内容scroll-view
.y-tabs__content-scrollview {
  flex-direction: column;
}
